<template>
	<div class="autolist">
		<CommonHead :title="title" :show="show"></CommonHead>
		<!--选车型tab切换-->
		<div class="row">
			<div class="textCenter">
				<span :class="{nav_selectCar:nav_selectCar,sactive:a}" @click="selectcar">选车型</span>
			</div>
			<div class="textCenter">
				<span :class="{sel_hand_btn:sel_hand_btn,ssactive:b}" @click="handselectcar">手动选车型</span>
			</div>
			<div class="clear"></div>
		</div>
		<Tabone v-show="tab1"></Tabone>
		<Tabtwo v-show="tab2"></Tabtwo>
	</div>
</template>

<script>
	import CommonHead from "./CommonHead.vue"
	import Tabone from "./Tabone.vue"
	import Tabtwo from "./Tabtwo.vue"
	
	export default{
		data(){
			return{
				title:"选车型",
				show:"show",
				a: false,
				b: false,
				nav_selectCar: true,
				sel_hand_btn: true,
				tab1: true,
				tab2: false
			}
		},
		methods:{
			selectcar(){
				this.a = true;
				this.b = false;
				this.sel_hand_btn = false;
				this.sel_hand_btn = false;
				this.tab1 = true;
				this.tab2 = false;
			},
			handselectcar(){
				this.a = false;
				this.b = true;
				this.sel_hand_btn = false;
				this.nav_selectCar = false;
				this.tab1 = false;
				this.tab2 = true;
			}
		},
		components:{
			CommonHead,
			Tabone,
			Tabtwo
		}
	}
</script>

<style scoped>
	.row{
		border-bottom: 1px solid #EAEAEA;
	}
	.clear{
		clear: both;
	}
</style>